<template>
  <ul class="tap">
    <li @click="changePage('assetss')">
      <a href="javascript:;" class="left">个人资料</a>
    </li>
    <li @click="changePage('index_ginsengBalance')">
      <a href="javascript:;" class="left">{{gametype}}余额</a>
    </li>
    <li @click="changePage('aceuserdata')">
      <a href="javascript:;" class="right">我的资产</a>
    </li>
    <li @click="changePage('index_result')">
      <a href="javascript:;" class="right">炼丹结果</a>
    </li>
    <li @click="changePage('indexginseng_gamelog')">
      <a href="javascript:;" class="right">游戏日志</a>
    </li>

  </ul>
</template>

<script>
import $ from "jquery";
export default {
  name: "alchemyNav",
  data() {
    return {
      leftFlag: false,
      centerFlag: false,
      rightFlag: false,
      gametype: u.getStore("winning").bitype
    };
  },
  components: {},
  mounted() {
    this.setShadow();
  },
  methods: {
    setShadow() {
      var path = location.pathname.split("/")[1];
      if (path === "assetss") {
        $(".tap li:eq(0) a")
          .css({
            background: "url(../../static/image/navbtn1.png) no-repeat",
            "background-size": "100% 100%"
          })
          .parents("li")
          .siblings()
          .find("a")
          .css({
            background: "url(../../static/image/navbtn2.png) no-repeat",
            "background-size": "100% 100%"
          });
      } else if (path === "aceuserdata") {
        $(".tap li:eq(1) a")
          .css({
            background: "url(../../static/image/navbtn4.png) no-repeat",
            "background-size": "100% 100%"
          })
          .parents("li")
          .siblings()
          .find("a")
          .css({
            background: "url(../../static/image/navbtn3.png) no-repeat",
            "background-size": "100% 100%"
          });
      }
    },
    changePage(pathname) {
      this.$router.push({ path: "/" + pathname });
      location.reload();
    }
  }
};
</script>

<style scoped>
@import url("../../static/css/base.css");
.tap {
  width: 58%;
  height: 75px;
  background: url(../../static/image/btn_bg.png) no-repeat scroll top left;
  background-size: 100% 100%;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
}
.tap li {
  width: 49%;
  height: 100%;
  padding: 1%;
}
.tap a {
  width: 102%;
  height: 100%;
  display: block;
  background: url(../../static/image/navbtn2.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 18px;
  font-family: "MicrosoftYaHei-Bold";
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 2px #a56a2c, -3px 0 #a56a2c, -2px 2px #a56a2c, -3px 1px #a56a2c;
  text-align: center;
  line-height: 48px;
}
.tap .left {
  background: url(../../static/image/navbtn3.png) no-repeat scroll top left;
  background-size: 100% 100%;
}
</style>
